<template>
    <view class="page-content">
        <sub-navbar :isBack="false"></sub-navbar>
        <view class="main-view">
            <view class="title-view">登录</view>
            <view class="form-view">
                <up-form :model="form" ref="formRef" labelWidth="100px">
                    <up-form-item label="账号" prop="phone" :borderBottom="true">
                        <up-input type="number" v-model="form.phone" placeholder="请输入手机号码" maxlength="11" border="none" clearable/>
                    </up-form-item>
                    <up-form-item label="验证码" prop="code" :borderBottom="true">
                        <view class="right">
                            <view class="l-code">
                                <up-input type="number" v-model="form.code" placeholder="请输入验证码" maxlength="6" border="none" clearable/>
                            </view>
                            <view class="r-btn" @click="getCode">
                                <text>{{!seconds ? '获取验证码' : seconds+'s后获取'}}</text>
                            </view>
                        </view>
                    </up-form-item>
                </up-form>
                <view class="agree-view">
                    <view>
                        <up-checkbox name="agree" usedAlone v-model:checked="aloneChecked"></up-checkbox>
                    </view>
                    <text>同意用户协议与隐私条款</text>
                </view>
                <view class="login-btn" :class="{active : isLogin == true}" @click="isLogin && handleLogin()">
                    <text>立即登录</text>
                </view>
                <view class="wx-view" @click="handleWXLogin">
                    <up-icon name="weixin-circle-fill" color="#04BE02" size="22"></up-icon>
                    <text style="margin: 0 10rpx;">微信登录</text>
                    <up-icon name="arrow-rightward" color="#999999" size="14"></up-icon>
                </view>
            </view>
        </view>
    </view>
</template>
<script setup lang="ts">
import { ref, reactive, watch } from 'vue';
import { userAppInfo } from '@/store/modules/user';
import { check_Phone } from '@/utils/check';
const store = userAppInfo();
const { baseChange } = store;

interface formType {
    phone?: string,
    code?: string
}
const form = reactive<formType>({});
const formRef = ref<any>(null);
const seconds = ref<number>(0);
const aloneChecked = ref<boolean>(false);
const isLogin = ref<boolean>(false);

watch(
    () => form.phone,
    (newVal:any) => {
        const { code }: any = form;
        if(newVal.length == 11 && code && code.length == 6) {
            isLogin.value = true;
        } else {
            isLogin.value = false;
        }
    }
)

watch(
    () => form.code,
    (newVal:any) => {
        const { phone }: any = form;
        if(phone.length == 11 && newVal.length == 6) {
            isLogin.value = true;
        } else {
            isLogin.value = false;
        }
    }
)

// 获取 验证码
const getCode = () => {
    if(seconds.value > 0) {
       uni.showToast({
            title: "不可以重复点击!",
            icon: 'none'
       })
       return
    } else {
        seconds.value = 60;
        let timer = setInterval(() => {
            seconds.value --;
            if(seconds.value < 1) {
                clearInterval(timer);
                seconds.value = 0;
            }
        }, 1000);
    }
}

// 登录
const handleLogin = () => {
    const { phone }: any = form;
    const telFlog = check_Phone(phone);
    if(!telFlog) return tipModel('请输入正确的手机号码!');
    if(!aloneChecked.value) return tipModel("请勾选相关协议!");
    const info = {
        token: '075f807fc17448cca16fe0b9f8cd142',
        nickName: '',
        avatar: '',
        mobile: phone,
    }
    baseChange(info);
    uni.switchTab({
        url: "/pages/home/index"
    })
}

const handleWXLogin = () => {
    uni.navigateTo({
        url: "/subPackage/pages/weChatLogin/index"
    })
}

const tipModel = (str:string) => {
    uni.showToast({
        title: str,
        icon: "none",
        mask: true,
        duration: 2000,
    })
}

</script>

<style lang="scss" scoped>
.main-view{
    flex: 1;
    .title-view{
        font-size: 60rpx;
        display: flex;
        justify-content: center;
        font-weight: bold;
        padding: 40rpx 0;
        margin-top: 100rpx;
    }
    .form-view{
        padding: 0 50rpx;
        .right{
            display: flex;
            justify-content: space-between;
            align-items: center;
            .r-btn{
                width: 160rpx;
                margin-left: 20rpx;
                color: #2979ff;
                font-size: 26rpx;
                display: flex;
                justify-content: flex-end;
                align-items: center;
                border-left: 2rpx solid #ceccca;
                height: 30rpx;
            }
        }
        .agree-view{
            display: flex;
            align-items: center;
            font-size: 26rpx;
            color: #909399;
            padding-top: 24rpx;
        }
        .login-btn{
            margin-top: 100rpx;
            width: 100%;
            height: 90rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #2979ff;
            color: #FFFFFF;
            font-size: 32rpx;
            border-radius: 50rpx;
            opacity: 0.3;
            &.active{
                opacity: 1 !important;
            }
        }
        .wx-view{
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 28rpx;
            padding-top: 100rpx;
            color: $uni-text-color-grey;
        }
    }
}
</style>